/**
 * 扩展 可加入xlsx插件解析excel导入名称等
 * @type {string[]}
 */

const names = ["张三", "李四", "王五", "赵六", "孙七", "周八", "吴九", "郑十", "王十一", "钱十二", "孙十三", "周十四", "吴十五", "郑十六", "孙十七", "周十八", "吴十九", "郑二十", "孙二十一", "周二十二", "吴二十三", "郑二十四", "孙二十五", "周二十六", "吴二十七", "郑二十八", "孙二十九", "周三十", "吴三十一", "郑三十二", "孙三十三", "周三十四"]
const $nameContainer = $('#name-container')

for (let i = 0; i < names.length; i++) {
    const $name = createName(names[i])
    $nameContainer.append($name)
}

function createName(name = "") {
    const $name = $(document.createElement("div"))
    $name.addClass("name")
    $name.text(name)
    return $name
}

let running = false
let rafId = null
function start () {
    if(!running) return
    const $names = $(".name")
    const max = $names.length
    const random = Math.floor(Math.random() * max)
    $names.removeClass('active')
    rafId = requestAnimationFrame(() => {
        $names.eq(random).addClass('active')
        if(running) {
            setTimeout(start,100)
        }
    })
}

function pause () {
    running = false
    if(rafId) {
        cancelAnimationFrame(rafId)
        rafId = null
    }
}

$("#start").on("click", function () {
    $(this).hide()
    $("#pause").show()
    running = true
    rafId = null
    start()
})
$("#pause").on("click", function () {
    $(this).hide()
    $("#start").show()
    running = false
    if(rafId) {
        cancelAnimationFrame(rafId)
        rafId = null
    }
    pause()
})